<template>
	<!-- 热门板块 -->
	<div class="echarts-header">
		<span>排名</span>
		<span>标题</span>
		<span>点赞率</span>
	</div>
	<div id="HotPlateChart" class="echarts"></div>
</template>

<script setup lang="ts">
	import { ECharts, EChartsOption, init } from 'echarts';
	import {
		ranking1,
		ranking2,
		ranking3,
		ranking4
	} from '../assets/ranking-icon';
	interface ChartProp {
		name: string;
		value: number;
		percentage: string;
		maxValue: number;
	}
	const initChart = (data: any = {}): ECharts => {
		const charEle = document.getElementById('HotPlateChart') as HTMLElement;
		const charEch: ECharts = init(charEle);
		const option: EChartsOption = {
			grid: {
				top: '5%',
				left: '7%',
				right: '4%',
				bottom: '1%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				axisLine: {
					show: false,
					lineStyle: {
						color: 'white'
					}
				},
				nameGap: 1,
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false,
					fontSize: 16
				},
				// boundaryGap: ["3%", "2%"],
				// splitNumber: 4,
				triggerEvent: false
			},
			yAxis: [
				{
					show: true,
					data: data.data.map((val: ChartProp) => val.name),
					inverse: true,
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#fff',
						formatter: function (value: any) {
							let str =
								value.length > 6
									? value.slice(0, 6) + '...'
									: value;
							let index =
								data.data
									.map((item: ChartProp) => item.name)
									.indexOf(value) + 1;
							return [
								'{' +
									(index > 3 ? 'lg' : 'lg' + index) +
									'|NO.' +
									index +
									'}',
								'{title|' + str + '}'
							].join(' ');
						},
						rich: {
							lg1: {
								width: 60,
								backgroundColor: {
									image: ranking1
								},
								color: '#fff',
								align: 'center',
								height: 20,
								fontSize: 13
							},
							lg2: {
								width: 60,
								backgroundColor: {
									image: ranking2
								},
								color: '#fff',
								align: 'center',

								height: 20,
								fontSize: 13
							},
							lg3: {
								width: 60,
								backgroundColor: {
									image: ranking3
								},
								color: '#fff',
								align: 'center',
								height: 20,
								fontSize: 13
							},
							lg: {
								width: 60,
								backgroundColor: {
									image: ranking4
								},
								color: '#fff',
								align: 'center',

								height: 20,
								fontSize: 13
							},
							title: {
								width: 60,
								fontSize: 13,
								align: 'center',
								padding: [0, 10, 0, 15]
							}
						}
					},
					triggerEvent: false
				},
				{
					show: true,
					inverse: true,
					data: data.data,
					axisLabel: {
						fontSize: 14,
						color: '#fff',
						// align: "right",
						margin: 20,
						formatter: (value: any) => {
							return value >= 10000
								? (value / 10000).toFixed(2) + 'w'
								: value;
						}
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					triggerEvent: false
				}
			],
			series: [
				{
					name: '条',
					type: 'bar',
					yAxisIndex: 0,
					data: data.data,
					barWidth: 12,
					itemStyle: {
						borderRadius: 30,
						color: function (params) {
							let num = data.colors.length;
							return data.colors[params.dataIndex % num];
						}
					},
					label: {
						show: true,
						position: [12, 0],
						lineHeight: 14,
						color: '#fff',
						formatter: (params: any) => {
							return params.data.percentage;
						}
					}
				},
				{
					name: '框',
					type: 'bar',
					yAxisIndex: 1,
					data: data.data.map((val: ChartProp) => {
						if (!val.maxValue) {
							return 5;
						}
						return val.maxValue;
					}),
					barWidth: 18,
					itemStyle: {
						color: 'none',
						borderColor: '#00c1de',
						borderWidth: 1,
						borderRadius: 15
					},
					silent: true
				}
			]
		};
		charEch.setOption(option);
		return charEch;
	};
	defineExpose({
		initChart
	});
</script>
<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: calc(100% - 56px);
	}
	.echarts-header {
		box-sizing: border-box;
		display: flex;
		height: 36px;
		margin: 10px 10px 0;
		line-height: 36px;
		background: url('../images/rankingChart-bg.png') no-repeat;
		background-size: 100% 100%;
		span {
			width: 18%;
			margin-left: 4px;
			font-size: 14px;
			font-weight: bold;
			color: #fdbc52;
			text-align: center;
			&:nth-child(2) {
				margin-left: 4px;
			}
			&:last-child {
				width: 20%;
				margin-left: 60px;
			}
		}
	}
</style>
